import React from 'react'
import {Card,Form,Input,Button,Upload,message} from 'antd'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import {fileUpload} from '../../../util/config'
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'
const Item=Form.Item;
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
function fetchEditorContent(){
  return "<p>haohao💛😁</p>";
}
function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}
class edit extends React.Component{
  constructor(props){
      super(props);
      this.state={
        editorState: BraftEditor.createEditorState(null),
        loading: false,
        imageUrl:'',
        data:{}
      }
  }
  

  handleChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          imageUrl,
          loading: false,
        }),
      );
    }
  };
  getData(){
    return {name:'121',price:'121',number:'121'};
  }
  handleEditorChange = (editorState) => {
    this.setState({ editorState })
}

  componentWillUnmount(){

  let data=this.getData();
  this.setState({data});
  }
  async componentDidMount () {
    // 假设此处从服务端获取html格式的编辑器内容
    const htmlContent = await fetchEditorContent()
    // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
    this.setState({
        editorState: BraftEditor.createEditorState(htmlContent)
    })
}
 onFinish = (values) => {
    const htmlContent = this.state.editorState.toHTML();
    console.log("好人")
    console.log(htmlContent)
     console.log('Received values from form: ', values);
};
  formRef = React.createRef();
  render(){
      const props=this.props;
      const { loading, imageUrl,editorState } = this.state;
      const data={name:'121',price:'121',number:'121'};
     
  const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      
       <Card title='编辑'>
<Form
ref={this.formRef}
onFinish={this.onFinish}
initialValues={data}
>
  <Item label='名称' 
  name='name'
  rules={[{ required: true, message: 'Please input your username!' }]}
  >
    <Input placeholder="商品名称" type='text'/>
  </Item>
  <Item label='价格'
  name='price'
  rules={[{ required: true, message: 'Please input your username!' }]}
  >
    <Input placeholder="商品价格" type='text'/>
  </Item>
  <Item label='数量'
  name='number'
  rules={[{ required: true, message: 'Please input your username!' }]}
  >
    <Input placeholder="商品数量" type='text'/>
  </Item>
  <Item label='主图'>
   <Upload
        name="file"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action={fileUpload}
        beforeUpload={beforeUpload}
        onChange={this.handleChange}
      >
        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
      </Upload>
  </Item>
  <Item label='详情'>
    <Card bordered>
  <BraftEditor
                    value={editorState}
                    onChange={this.handleEditorChange}
                   
                />
                </Card>
  </Item>
<Item>
  <Button type='primary' htmlType="submit">保存</Button>
  <Button type='primary'style={{margin:'0 1em'}}onClick={()=>props.history.push('/admin/list')}>取消</Button>
</Item>
</Form>
       </Card>
    )
}
}

export default edit;
